<template>
    <van-tag class="search-term" size="large"
             round :closeable="closeable"
             @close="$emit('close')"
             @click="$emit('click')">
        <slot></slot>
    </van-tag>
</template>

<script>
  import { Tag } from "vant"

  export default {
    name: "SearchTerm",
    components: {
      [Tag.name]: Tag,
    },
    props: {
      closeable: Boolean,
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .search-term {
        display: inline-flex;
        align-items: center;
        line-height: 1rem;
        margin-top: 9px;
        margin-right: 9px;
        padding: 6px 12px;
        background: $gray-1;
        color: $gray-7;
    }
</style>
